<template>
	<view class="box" v-if="JSON.stringify(detailItem) !== '{}'">
		<!-- 招聘信息概括 -->
		<view class="recruit-info">
			<!-- 岗位 -->
			<view class="title">{{ detailItem.title }}</view>
			<!-- 工资 -->
			<view class="salary">3K&nbsp;-&nbsp;5K</view>
			<!-- 要求 -->
			<view class="require">
				<view class="require-item">
					<uni-icons custom-prefix="iconfont" type="icon-didiandingwei_o" size="24"></uni-icons>
					<text>广州市</text>
				</view>
				<view class="require-item">
					<uni-icons custom-prefix="iconfont" type="icon-w_shangdian" size="24"></uni-icons>
					<text>应届毕业生</text>
				</view>
				<view class="require-item">
					<uni-icons custom-prefix="iconfont" type="icon-boshimao" size="24"></uni-icons>
					<text>专科及以上</text>
				</view>
			</view>
			<!-- 公司福利 -->
			<view class="welfare">
				<view class="welfare-item">五险一金</view>
				<view class="welfare-item">年底双薪</view>
				<view class="welfare-item">周末双休</view>
			</view>
			<view class="retime">更新时间：&nbsp;2023-12-12</view>
			<!-- 收藏 -->
			<view class="favi" @click="clickFavi">
				<uni-icons custom-prefix="iconfont" :type="faviState ? faviList[1] : faviList[0]" size="32"></uni-icons>
			</view>
		</view>
		<!-- 招聘人 -->
		<view class="recruit-man">
			<view class="pic">
				<image src="/static/page1.jpg" mode="widthFix"></image>
			</view>
			<view class="rg">
				<view class="man-info">
					<view class="man-info-name">张女士</view>
					<view class="man-info-work">---招聘主管</view>
				</view>
				<view class="nowtime">20分钟前在线</view>
			</view>
		</view>

		<!-- 信息详情 -->
		<view class="recruit-detail">
			<view class="detail-info detail-item">
				<view class="hd">职业信息</view>
				<view class="bd">
					<ul>
						<li>招聘2人&nbsp;|&nbsp;计算机相关专业&nbsp;|&nbsp;在开发部任职&nbsp;|&nbsp;有经验者优先</li>
						<li>
							招聘结束时间：
							<text>2023-10-12&nbsp;~&nbsp;2023-10-15</text>
						</li>
					</ul>
				</view>
			</view>
			<view class="detail-work detail-item">
				<view class="hd">职业职责</view>
				<view class="bd">
					<ul>
						<li>1. 深入理解业务需求，完成相关技术设计、开发、文档和测试等工作；</li>
						<li>2. 深入理解系统架构及框架，分析并提高系统质量，性能和安全性；</li>
						<li>3. 参与需求、方案讨论，技术调研，代码评审，解决开发中的技术难题；</li>
						<li>4. 参与对系统进行持续优化、重构,引入新技术,提升研发效率。</li>
					</ul>
				</view>
			</view>
			<view class="detail-req detail-item">
				<view class="hd">任职要求</view>
				<view class="bd">
					<ul>
						<li>1. 学校/专业不限，本科、研究生均可；985院校优先；</li>
						<li>
							2.
							在计算机、电子设计、数学建模等竞赛中有过获奖经历，如：ACM国际大学生程序设计竞赛、大学生超级计算机竞赛、微软创新杯全球学生竞赛、Intel大学生电子设计大赛全国大学生电子设计大赛、美国大学生数学建模竞赛、中国大学生数学建模竞赛比赛，等等；
						</li>
						<li>3. 加分项：国际开源项目贡献者；</li>
						<li>4. 具备一定计算机基础，包括编程、数据结构、算法等方面的知识，熟悉至少一种编程语言，如Java、Python（Python编程而不是Python数据分析）、C++等；</li>
					</ul>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="lf">
				<uni-icons custom-prefix="iconfont" type="icon-xinxi" size="26"></uni-icons>
				<text>聊一聊</text>
			</view>
			<view class="rg">
				<button @click="apply">申请职位</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
	data() {
		return {
			// 收藏图标的两种状态
			faviList: ['icon-shoucang1', 'icon-shoucang'],
			// 该详情的列表内容
			detailItem: {},
			// 投递列表
			deliverRecruit: JSON.parse(uni.getStorageSync('deliverRecruit') || '[]')
		};
	},
	onLoad(options) {
		// console.log(options.item);
		// 解密url参数对象
		if (options.item) {
			this.detailItem = JSON.parse(decodeURIComponent(options.item));
		} else {
			// 没有详情数据，返回列表页面
			uni.$showMsg('没有详情数据', 1500);
			setTimeout(() => {
				uni.reLaunch({
					url: '/subpkg/recruit/recruit'
				});
			}, 1500);
		}
	},
	methods: {
		...mapMutations('m_collect', ['setRecruitList', 'delRecruitList']),

		// 点击收藏图标
		clickFavi() {
			if (this.token) {
				// 取反收藏状态，并更新vuex的recruitList和本地存储
				this.detailItem.collectState = !this.faviState;

				// 已收藏
				if (this.detailItem.collectState) {
					uni.$showMsg('已收藏！', 1000);
					// 追加该列表到vuex的recruitList，并本地存储
					this.setRecruitList(this.detailItem);
				} else {
					// 取消收藏
					uni.$showMsg('已取消收藏！', 1000);
					this.delRecruitList(this.detailItem);
				}
			} else {
				// 无token下，需要登录才能收藏
				uni.$showMsg('请登录！', 1500);
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/my/my'
					});
				}, 1500);
			}
		},
		// 申请职位---投递
		apply() {
			// 如果已申请过，则提示用户，且不进行再次申请
			var index = this.deliverRecruit.findIndex((list) => list.id === this.detailItem.id);
			// 无重复才添加
			if (index < 0) {
				this.deliverRecruit.unshift(this.detailItem);
				uni.setStorageSync('deliverRecruit', JSON.stringify(this.deliverRecruit));
				uni.$showMsg('成功申请职位，\n可到\t我的-我的投递\t中查看',2500)
			}else{
				uni.$showMsg('请勿重复申请职位，\n可到\t我的-我的投递\t中查看',2500)
			}
		}
	},
	computed: {
		...mapState('m_collect', ['recruitList']),
		...mapState(['token']),

		// vuex中若无该项，则为未收藏，faviState直接为false---收藏图标不点亮
		faviState() {
			if (this.token) {
				var pi = this.recruitList.findIndex((item) => item.id === this.detailItem.id);
				// vuex若有该项，则为已收藏
				return pi < 0 ? false : true;
			} else {
				// 无token下，图标全部不点亮
				return false;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .icon-shoucang,
::v-deep .icon-shoucang1 {
	color: #00dcb6 !important;
}
.box {
	box-sizing: border-box;
	margin: 40rpx;
}
.recruit-info {
	position: relative;
	border-radius: 24rpx;
	box-shadow: 0px 0px 14rpx 10rpx #ccc;
	padding: 40rpx;

	.title {
		font-size: 40rpx;
		font-weight: 700;
	}
	.require {
		display: flex;
		.require-item {
			display: flex;
			align-items: center;
			margin-right: 22rpx;
			&:last-child {
				margin-right: 0;
			}
			text {
				font-size: 28rpx;
			}
		}
	}
	.welfare {
		display: flex;
		margin: 30rpx 0 40rpx;
		.welfare-item {
			background-color: #efefef;
			border: 2rpx solid #85888e;
			padding: 10rpx 6rpx;
			color: #6c6c6c;
			font-size: 24rpx;
			margin-right: 20rpx;
			border-radius: 6rpx;
		}
	}
	.salary {
		color: #e60909;
		font-size: 38rpx;
		margin: 20rpx 0;
	}
	.retime {
		border-top: 2rpx solid #bbbbbb;
		padding-top: 50rpx;
		font-size: 28rpx;
	}
	.favi {
		position: absolute;
		right: 66rpx;
		top: 44rpx;
		cursor: pointer;
	}
}

.recruit-man {
	position: relative;
	border: 2rpx solid #efefef;
	border-radius: 10rpx;
	padding: 32rpx 24rpx;
	display: flex;
	margin: 80rpx 0;

	.pic {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.rg {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		justify-content: space-around;
		.man-info {
			display: flex;
			align-items: center;
			.man-info-name {
				font-size: 40rpx;
			}
			.man-info-work {
				font-size: 28rpx;
				color: #4f4f4f;
				margin-left: 30rpx;
			}
		}
		.nowtime {
			font-size: 28rpx;
			color: #9a9a9a;
		}
	}
}

.recruit-detail {
	padding-bottom: 120rpx;
	.detail-item {
		margin-bottom: 42rpx;
		.hd {
			font-size: 40rpx;
			font-weight: 700;
			display: flex;
			align-items: center;
			&::before {
				content: '';
				display: block;
				width: 12rpx;
				height: 56rpx;
				background-color: #00dcb6;
				margin-right: 30rpx;
			}
		}
		.bd {
			font-size: 28rpx;
			margin-top: 42rpx;
			li {
				margin-bottom: 24rpx;
				margin-left: 40rpx;
			}
		}
	}
}

.bottom {
	width: 100%;
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background-color: white;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	box-sizing: border-box;
	padding: 10rpx 72rpx 10rpx 30rpx;
	.lf {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.rg {
		flex: 50%;
		margin-left: 30rpx;
		button {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #00dcb6;
			border: 0;
			font-size: 30rpx;
		}
	}
}
</style>
